<template>
	<view class="content">
		
		
		<!-- tab -->
		<view class="sticky" :style="{'paddingTop':'0px'}" >
			<view class="navTab" v-if="miniapp_switch == 1">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index+1}" @click="tabChange(index+1)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
		</view>
		
		
		<view :class="show ? 'fade-in' : 'fade-out'"  >
			<view class="top" v-if="show">
				<view class="left" v-if="list[1]">
					<view class="user">
						<image :src="list[1].avatar" class="avatar" mode=""></image>
						<view class="name">{{list[1].nickname}}</view>
						<view class="num">
							<text v-if="current==1" >接单局数：{{list[1].order_num}}</text>
							<text v-else >成交金额：{{list[1].order_money}}</text>
						</view>
					</view>
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/di2.png" class="di2" mode="">
					</image>
				</view>
				<view class="left center" v-if="list[0]">
					<view class="user">
						<image :src="list[0].avatar" class="avatar" mode=""></image>
						<image src="/static/index/huangguan.png" class="huangguan" mode=""></image>
						<view class="name">{{list[0].nickname}}</view>
						<view class="num">
							<text v-if="current==1" >接单局数：{{list[0].order_num}}</text>
							<text v-else >成交金额：{{list[0].order_money}}</text>
						</view>
					</view>
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/di1.png" class="di1" mode="">
					</image>
				</view>
				<view class="left right" v-if="list[2]">
					<view class="user">
						<image :src="list[2].avatar" class="avatar" mode=""></image>
						<view class="name">{{list[2].nickname}}</view>
						<view class="num">
							<text v-if="current==1" >接单局数：{{list[2].order_num}}</text>
							<text v-else >成交金额：{{list[2].order_money}}</text>
							
						</view>
					</view>
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/di3.png" class="di2" mode="">
					</image>
				</view>
			</view>
			
			<view class="bottom">
				<view class="list" v-for="(item,index) in flist" :key="index">
					<view class="list-left">{{index+4}}</view>
					<view class="list-center">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="list-right">
						<view class="user-name">{{item.nickname}}</view>
						<view class="order-num">
							<text v-if="current==1" >接单数：{{item.order_num}}</text>
							<text v-else >成交金额：{{item.order_money}}</text>
						</view>
					</view>
				</view>
				
				
				
			</view>
		</view>

		<view class="tishi">只展示前10名</view>
		<!-- <w-load-more ref="wLoadMore"></w-load-more> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //接单排行榜单
				flist: [], //接单排行列表
				jlist: [], //价值排行榜单
				jflist: [], //价值排行列表
				show: false,
				
				//tab
				scrollList: [{
						name: '接单排行'
					},
					{
						name: '价值排行',
					}
				],
				current: 1,
				width: 0,
				left: 0,
				miniapp_switch: 0,
				page: 1,
				loadingStatus: 'loadmore',
				
			};
		},
		onLoad() {
			this.getlist();
			this.miniapp_switch = 1
		},
		onReachBottom() {
			// if(this.flist.length < 10) return
			//不做下拉加载了，只展示前10
			// this.page++
			// this.$refs['wLoadMore'].setLoading()
			// this.getlist();
		},
		
		methods: {
			
			
			async getlist() {
				if (this.current == 1) {
					var url = '/api/play/number_ranking_list';
				} else {
					var url = '/api/play/money_ranking_list';
				}
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						// url: '/api/play/ranking_list',
						url: url,
						data: {
							page: this.page,
							type: this.current
						}
					})
					let data = result.data.data.data
					
					if(this.page == 1){
						if (data.length > 3) {
							this.list = data.splice(0, 3)
							this.flist = data
						} else {
							this.list = data
						}
						// this.flist = data
					}else{
						this.flist = this.flist.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if(data.length == 0){
							this.page--
						}
					}
					
					// if (data.length > 3) {
					// 	this.list = data.splice(0, 3)
					// 	// this.flist = data
					// } else {
					// 	this.list = data
					// }
					this.show = true
					
				} catch (e) {
					//TODO handle the exception
				}
			},
			
			tabChange(index) {
				this.current = index
				this.page = 1
				this.getlist()
			},
		}
	}
</script>
<style>
	page {
		background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/pageBg.png") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
	}
</style>
<style lang="scss" scoped>
	page {
		// background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/pageBg.png") no-repeat;
		// background-size: 100% 100%;
		// background-attachment: fixed;
	}

	.content {
		/* tab */
		.sticky {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10000;
			}
		
			.navTab {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;
				padding-left: 10px;
				.tab-item {
					width: 150rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
						// margin-right: 56rpx;
				}
		
				.at-tab-item {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
		
				}
		
				.tab-bottom {
					position: absolute;
					bottom: 0;
					transition: left .2s linear;
					display: flex;
					justify-content: center;
		
					.xian {
						height: 8rpx;
						background: linear-gradient(90deg, #080808 0%, #080808 100%);
						border-radius: 60rpx;
					}
				}
			}
		
		/* tab */
		
		.top {
			height: 550rpx;
			display: flex;
			align-items: flex-end;
			padding: 0 48rpx;
			

			.left {
				display: flex;
				flex-direction: column;
				align-items: center;

				.user {
					margin-bottom: 40rpx;

					.avatar {
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						margin: 16rpx 0 8rpx 0;
						text-align: center;
					}

					.num {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.di2 {
					width: 229rpx;
					height: 102rpx;
				}
			}

			.center {
				position: relative;

				.di1 {
					width: 196rpx;
					height: 160rpx;
				}

				.huangguan {
					width: 70rpx;
					height: 60rpx;
					position: absolute;
					top: -37rpx;
					left: 16rpx;
				}
			}
		}

		.bottom {
			padding-left: 60rpx;
			
			.list {
				display: flex;
				align-items: center;
				height: 132rpx;

				.list-left {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.list-center {
					margin-left: 32rpx;
					margin-right: 24rpx;

					image {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}
				}

				.list-right {
					.user-name {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.order-num {
						font-size: 24rpx;
						font-weight: 400;
						color: #CCCCCC;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.tishi{
		height: 40px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: #838383;
	}
</style>